<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  li{list-style: none;}
  #box{width: 990px;height:487px;background: #E7E7E7;margin: 50px auto;padding: 10px;position: relative;}
  #box > ul > li{width: 200px;height: 120px;border:1px solid #C8C8C8;cursor:pointer;}
  #box > ul > li img{display: block;margin: 15px auto;}
  #box > ul > li strong{display:inline-block;font-size: 24px;width: 200px;text-align: center;}
  #box .box_1{width: 790px;height: 487px;position: absolute;left: 211px;top: 10px;text-align: center;}
  .box_1 img{width: 790px;height: 487px;}
  .box_1 ul{width: 790px;height: 42px;line-height: 40px;position: absolute;;bottom: -2px;}
  .box_1 ul li{height: 38px;border: 1px solid rgba(0,0,0,0.3);display: inline-block;background: rgba(90,90,82,0.8);cursor:pointer;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Div = document.getElementById('box');
      var Ul = Div.getElementsByTagName('ul')[0];
      var Li = Ul.getElementsByTagName('li');
      var Div1 = Div.getElementsByTagName('div')[0];
      var Ul1 = Div1.getElementsByTagName('ul')[0];
      var Img = Div1.getElementsByTagName('img')[0];
      var arr1 = ["images/1.jpg","images/2.jpg","images/3.jpg"];
      var arr1_1 = ["地球星空图","太空星球图","太阳动画图"];
      var arr2 = ["images/4.jpg","images/3.jpg","images/2.jpg","images/1.jpg"];
      var arr2_2 = ["夜空下的公路","太阳动画图","太空星球图","地球星空图"];
      var arr3 = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
      var arr3_3 = ["地球星空图","太空星球图","太阳动画图","夜空下的公路","海边的独木桥"];
      var arr4 = ["images/4.jpg","images/3.jpg","images/2.jpg"];
      var arr4_4 = ["夜空下的公路","太阳动画图","太空星球图"];
      var arr = [arr1,arr2,arr3,arr4];
      var arr_1 = [arr1_1,arr2_2,arr3_3,arr4_4];
      var num = 0;
      var num1 = 0;
      function fun(arr1,arr1_1){
        Img.src = arr1[num1];
        for (var i = 0; i < arr1_1.length; i++) {
          Ul1.innerHTML += "<li>" + arr1_1[i] + "</li>" ;
          Ul1.getElementsByTagName("li")[i].style.width = (790 - arr1_1.length * 2) / arr1_1.length + "px";
        };
        var Li1 =  Ul1.getElementsByTagName("li");
        for (var i = 0;i < Li1.length;i++){
          Li1[i].index = i;
          Li1[i].onmouseover = function(){
            num1 = this.index;
            for (var i = 0; i < Li1.length;i++) {
              Li1[i].style.background = "";
            };
            this.style.background = "rgba(227,242,8,0.5)";
            Img.src = arr1[num1];
          }
        };      
      }
      fun(arr[num],arr_1[num]);
      for (var i = 0; i < Li.length; i++){
        Li[i].index = i;
        Li[i].onmouseover = function(){
          num = this.index;
          for (var i = 0; i < Li.length; i++) {
            Img.innerHTML = "";
            Ul1.innerHTML = "";
            Li[i].style.background = "";
          };
          fun(arr[num],arr_1[num]);
          this.style.background = "#fff";
        }
      };


    }
  </script>
</head>
<body>
  <div id="box">
    <ul>
      <li><img src="images/5.png"><strong>最热团购</strong></li>
      <li><img src="images/6.png"><strong>商城特惠</strong></li>
      <li><img src="images/7.png"><strong>名品推荐</strong></li>
      <li><img src="images/8.png"><strong>缤纷活动</strong></li>
    </ul>
    <div class="box_1">
      <img src="">
      <ul></ul>
    </div>
  </div>
</body>
</html>